<!-- toaster directive -->
<toaster-container toaster-options="{'position-class': 'toast-top-right', 'close-button':true}"></toaster-container>
<!-- / toaster directive -->
<!-- 导航条 -->
<div class="bg-white bread-crumb">
    <ul class="breadcrumb b-a m-b-n-xs lter b-b wrapper-md">
        <li><a ui-sref="main"><i class="glyphicon glyphicon-log-in"></i> 门禁管理</a></li>
        <li><a ui-sref="main.authm.cardAuth.list" class="active">授权管理</a></li>
        <li class="active" ng-bind="title"></li>
    </ul>
</div>
<!--读卡-->
<object classid="clsid:2FF94F50-4070-428B-8049-AA7F4153DBEB" codebase="../webSerial.msi" width="0" height="0" id="webSerial" name="webSerial">
</object>
<!-- 内容区域 -->
<div class="wrapper-md content">
    <div class="panel panel-default">
        <!-- 头部 -->
        <div class="panel-heading font-bold">
            <a class="btn btn-sm btn-icon btn-rounded btn-default pull-right m-t-n-xs" ui-sref="main.authm.cardAuth.list">
               <i class="text-md glyphicon glyphicon-chevron-up text-muted"></i>
            </a>
        </div>
        <!--表单-->
        <div class="panel-body" id="AddNewMenber">
            <form class="form-horizontal" name="user_form">
                <div class="form-group" style="width: 100%">
                    <label class="col-lg-2 col-sm-3 control-label" for="bname" style="width: 12.5%"><span class="text-danger wrapper-sm">*</span>楼栋地址:</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" style="width:97%" name="bname" id="bname" required ng-model="record.buildingAddress" ng-click="openNowAddress(record.personId)" placeholder="请选择楼栋地址..." ng-disabled="{{isreadonly}}">
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
                <!--用户名-->
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="pname"><span class="text-danger wrapper-sm">*</span>姓名:</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="pname" id="pname" ng-model="pname" ng-click="openPerson(record.buildingId)" placeholder="请选择人员姓名..." required ng-disabled="{{isreadonly}}">
                    </div>
                    <input type="text" class="form-control" name="personId" ng-hide="true" id="personId" ng-model="record.personId" required>
                </div>
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label"><span class="text-danger wrapper-sm">*</span>APP开门</label>
                    <div class="col-sm-6">
                        <span style="display: inline-block;width: 100px;line-height: 40px"><input ng-checked="true" name="status" type="radio" value="1" ng-value="1" ng-model="record.appAvalible"/>启用</span>
                        <span style="display: inline-block;width: 100px;line-height: 40px"><input  name="status" type="radio" value="0" ng-value="0" ng-model="record.appAvalible"  />禁用</span>
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="idCardUID">身份证UID：</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="idCardUID" id="idCardUID" placeholder="请输入身份证号UID..." ng-model="record.idCardUID">
                        <p class="reminder" ng-if="cardUUIDStatus">*请把卡放在读卡器上</p>
                    </div>
                    <span class="readCard" ng-click="readIdCard()">{{cardUUIDStatus?'读取中':'读卡'}}</span>
                    <p></p>
                </div>
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="endTime"><span class="text-danger wrapper-sm">*</span>结束时间:</label>
                    <div class="col-lg-4" style="width: 50%;">
                        <div class="input-group m-d" tyle="position: relative">
                            <input type="text" class="form-control ng-pristine ng-valid ng-isolate-scope ng-empty ng-valid-date ng-touched" name="endTime" current-text="今天" clear-text="清除" close-text="关闭" ng-model="record.endTime" datepicker-popup="yyyy-MM-dd" id="endTime" is-open="endTime" datepicker-options="dateOptions" placeholder="请选择结束时间" required>
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-default" ng-click="openDatepicker($event,2)">
                                <i class="glyphicon glyphicon-calendar"></i>
                                </button>
                            </span>
                            <div class="timelimit">
                                <span ng-click="chooceTime(3)">3个月</span>
                                <span ng-click="chooceTime(6)">6个月</span>
                                <span ng-click="chooceTime(12)">一年</span>
                                <span ng-click="chooceTime()">永久</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="liveCardUID">居住证UID：</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="liveCardUID" id="liveCardUID" placeholder="请输入居住证UID..." ng-model="record.liveCardUID">
                        <p class="reminder" ng-if="liveCardUUIDStatus">*请把卡放在读卡器上</p>
                    </div>
                    <span class="readCard" ng-click="readLiveCard()">{{liveCardUUIDStatus?'读取中':'读卡'}}</span>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
                <div class="form-group" style="position: relative">
                    <label class="col-lg-2 col-sm-3 control-label">IC卡号：</label>
                    <div class="col-sm-6">
                        <div style="width: 100%;min-height: 35px;vertical-align: middle;border-radius: 4px;padding: 0;display: inline-block;border: 1px solid #bdc3c7;">
                            <div ng-repeat="p in record.icCardUIDs track by $index" style="position: relative;">
                                <div style=" position: relative;">
                                    <input type="text" class="form-control ICCardinput" name="IcCardNo" placeholder="请输入IC卡号{{$index}}..." ng-model="record.icCardUIDs[$index]" style="border: none;">
                                    <span class="inputClose" ng-click="del($index)"></span>
                                </div>
                            </div>
                            <div style="position: relative;" ng-show="record.icCardUIDs.length<=0">
                            <div style="position: absolute;top:0px;">
                                <input type="text" class="form-control ICCardinput" readonly="readonly" placeholder="请输入IC卡号..." style="border: none;height: 33px;">
                            </div>
                        </div>
                        </div>
                        <p class="reminder" ng-if="icCardUUIDStatus">*请把卡放在读卡器上</p>
                        <!--用来预先占位置，当record.icCardUIDs大于0时隐藏起来-->
                        
                    </div>
                    <button type="button" style="margin-left: 0px;" ng-click="readIcCard()" class="readIcCard">{{icCardUUIDStatus?'读取中':'读卡'}}</button>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
                <div class="form-group" style="width: 100%">
                    <div class="col-sm-6 col-sm-offset-2 text-center" style="width: 100%;margin: 0;padding: 0;text-align: center">
                        <button type="button" class="btn  w-xs addNew" ng-show="reset" ng-click="resetFrom()">重置</button>
                        <button type="submit" class="btn btn-info w-xs m-l-xl addNew" ng-disabled="isDisabled">保存
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--姓名模态框-->
<script type="text/ng-template" id="personList.html">
    <div ng-hide="loading" class="wrapper-md content">
        <!-- 数据显示 -->
        <div class="wrapper-data">
            <div class="panel panel-default">
                <!-- 头部 -->
                <div class="panel-heading clearfix">
                    <div class="w-auto">
                        <form ng-submit="searchP()" class="form-inline">
                            <div class="form-group" style="width: 30%">
                                <label for="personName">人员姓名：</label>
                                <input type="text" class="form-control" style="width: 180px" id="personName" name="personName" placeholder="" ng-model="paramP.personName">
                            </div>
                            <div class="form-group" style="width: 30%">
                                <label for="IDCardNo">身份证：</label>
                                <input type="text" class="form-control" style="width: 180px" id="IDCardNo" name="IDCardNo" placeholder="" ng-model="paramP.IDCardNo">
                            </div>
                            <button type="submit" class="btn btn-primary new-primary" style="margin-left: 10px">查询</button>
                        </form>
                    </div>
                </div>
                <!-- 数据表格 -->
                <div class="table-responsive">
                    <table class="table table-striped b-t b-light text-center">
                        <thead>
                            <tr>
                                <th>人员姓名</th>
                                <th>身份证号码</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="item in pageInfo.data">
                                <td class="v-middle">{{item.personName}}</td>
                                <td class="v-middle">{{item.IDCardNo}}</td>
                                <td class="v-middle">
                                    <a ng-click="selectPerson(item.personId,item.personName,item.IDCardNo)">选择</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <span data-ng-include=" 'src/tpl/pageInfo.html' "></span>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-warning addNew" ng-click="cancel()">取消</button>
    </div>
</script>
<style scoped>
input[name='IcCardNo']::-ms-clear {
    display: none;
}

.icCardBox {
    width: 45%;
}

.dropdown-menu .btn-danger {
    padding: 8px 12px;
}

.modal.in .modal-dialog {
    width: 1100px;
}

.form-group {
    width: 50%;
    float: left;
}

.form-group .col-lg-2 {
    width: 25%;
}

.form-group .col-lg-4 {
    width: 65%;
}

.app-content-body .content {
    margin-top: 25px;
}

input[type='radio'] {
    vertical-align: middle;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    margin-right: 6px;
    cursor: pointer;
}

.timelimit {
    width: 200px;
    position: absolute;
    right: -210px;
    top: 8px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
}

.timelimit span {
    font-size: 14px;
    cursor: pointer;
    color: #78a7ff;
    flex: 1;
    text-align: center;
}

.timelimit span:hover {
    color: orangered;
}

.readCard {
    line-height: 40px;
    background-color: #78a7ff;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.readCard:hover {
    background-color: #6490f2;
}

.inputClose {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 10px;
    color: red;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 7px;
    background-image: url(../../../../res/img/icon.png);
    background-repeat: no-repeat;
    background-position: 2px -35px;
}

.cityinput {
    width: 150px!important;
    border: 1px solid #bdc3c7;
    border-radius: 4px;
    color: #acb8c5;
}

.cityinput option[attr='selected'] {
    color: #000;
}

.readCardBtn,
.readIcCard {
    line-height: 32px;
    padding: 0 10px;
    background-color: #78a7ff;
    border-radius: 4px;
    color: #fff;
    border: none;
    vertical-align: middle;
    margin-left: 12px;
}

.readCardBtn:hover,
.readCardBtn:hover {
    background-color: #6490f2;
}

.form-control[readonly] {
    background-color: #FFFFFF!important;
    border: 1px solid #bdc3c7;
}

.reminder {
    margin: 5px 0px 0px 0px;
    font-size: 12px;
    color: #FF0000;
    clear: both;
}

.t-reminder {
    margin-top: 40px;
}
</style>